<template>
  <div>
    <el-row>
      <el-col :span="20" :offset="2">
        <el-card style="width: 100%; margin-top: 20px; align:center">
          <h1 style="text-align: center">确认订单</h1>
          <el-card style="width: 100%; margin-top: 20px; align:center" class="box-card">
            <template #header>
              <div class="card-header">
                <span>收货地址</span>
                <el-button class="button" type="text" style="float:right" @click="dialogVisible=true">选择其他</el-button>
              </div>
            </template>
            <div class="text item">
              <el-row :gutter="20">
                <el-col :span="6"><div class="grid-content">收货人: {{address.name}}</div></el-col>
                <el-col :span="6"><div class="grid-content">收货人电话: {{address.phoneNumber}}</div></el-col>
                <el-col :span="12"><div class="grid-content">收货地址: {{address.province}}{{address.city}}{{address.region}}{{address.detailAddress}}</div></el-col>
              </el-row>
            </div>
          </el-card>

          <el-card style="width: 100%; margin-top: 20px; align:center" class="box-card">
            <template #header>
              <div class="card-header">
                <span>购买商品列表</span>
              </div>
            </template>
            <div class="text item">
              <el-table :data="cartItemList" style="width: 100%;margin-top:30px;" stripe>
                <el-table-column 
                  align="center" 
                  label="图片">
                  <template slot-scope="scope">
                    <img :src="scope.row.productPic" style="width: 100px; height: 100px" class="user-avatar">
                  </template>
                </el-table-column>
                <el-table-column 
                  prop="productName" 
                  align="center" 
                  label="商品名称">
                </el-table-column>
                <el-table-column 
                  prop="price" 
                  align="center" 
                  label="价格">
                </el-table-column>
                <el-table-column 
                  prop="name" 
                  align="center" 
                  label="数量">
                  <template slot-scope="scope">
                    {{scope.row.quantity}}
                  </template>
                </el-table-column>

                <el-table-column align="center" label="操作">
                  <template slot-scope="scope">
                    <el-button type="text" size="small" @click="toInfo(scope.row.productId)">查看</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-card>

          <el-card style="width: 100%; margin-top: 20px; align:center" class="box-card">
            <el-row :gutter="20" style="margin-top:20px">
              <el-col :span="6">
                <div class="grid-content bg-purple">
                  <el-input v-model="integration" placeholder="请输入使用积分" :disabled="integrationStatus"></el-input>
                  <span>（可用积分：{{memberIntegration}}）</span>
                </div>  
              </el-col>
              <el-col :span="6" :offset="12">
                <div class="grid-content bg-purple">
                  <div>总金额：<span style="color: #F40; font-weight: 700">{{calcAmount.totalAmount}}</span>元</div>
                  <div>运费：<span style="color: #F40; font-weight: 700">{{calcAmount.freightAmount}}</span>元</div>
                  <div>优惠金额：<span style="color: #F40; font-weight: 700">{{calcAmount.promotionAmount}}</span>元</div>
                  <div>实付金额：<span style="color: #F40; font-weight: 700">{{calcAmount.payAmount}}</span>元</div>
                </div>  
              </el-col>
            </el-row>
          </el-card>

          <el-row :gutter="20" style="margin-top:20px">
            <el-col :span="6" :offset="18">
              <div class="grid-content bg-purple">
                  <el-button type="primary" @click="confirmOrder">确认下单</el-button>
              </div>  
            </el-col>
          </el-row>

          <el-dialog :visible.sync="dialogVisible" title="选择收货地址">
            <el-table :data="addressList" highlight-current-row @current-change="handleCurrentChange" style="width: 100%;" stripe>
              <el-table-column
                type="index"
                width="50">
              </el-table-column>
              <el-table-column 
                prop="name" 
                align="center" 
                label="收货人">
              </el-table-column>
              <el-table-column 
                prop="phoneNumber" 
                align="center" 
                label="收货人电话">
              </el-table-column>
              <el-table-column 
                align="center" 
                label="收货地址"
                :show-overflow-tooltip='true'>
                <template slot-scope="scope">
                  {{scope.row.province}}{{scope.row.city}}{{scope.row.region}}{{scope.row.detailAddress}}
                </template>
              </el-table-column>
            </el-table>

            <!-- <div style="text-align:right; margin-top:10px">
              <el-button type="danger" @click="dialogVisible=false">取消</el-button>
              <el-button type="primary" @click="confirmSubmit">确认</el-button>
            </div> -->
          </el-dialog>

        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import { getConfirmOrder, confirmOrder } from '@/api/order'

export default {
  name: "index",
  created() {
    this.select = this.$route.query.cartIds
    this.getConfirmOrder()
  },
  data() {
    return {
      address: {},
      addressList: [],
      cartItemList: [],
      calcAmount: {},
      memberIntegration: 0,
      integration: '',
      integrationStatus: false,
      dialogVisible: false,
      cartItem: {
        id: '',
        productId: '',
        quantity: 1
      },
      orderParam: {
        memberReceiveAddressId: '',
        useIntegration: '',
        cartIds: []
      },
      num: 0,
    }
  },
  methods: {
    async getConfirmOrder() {
      const res = await getConfirmOrder(this.select)
      console.log("getConfirmOrder",res)
      
      const { cartItemList, memberReceiveAddress, memberReceiveAddressList, calcAmount, memberIntegration } = res.data
      this.address = memberReceiveAddress
      this.addressList = memberReceiveAddressList
      this.cartItemList = cartItemList
      this.calcAmount = calcAmount
      this.memberIntegration = memberIntegration > 0 ? memberIntegration : 0
      this.integrationStatus = memberIntegration >= 1000 ? false : true
      console.log("integrationStatus",this.integrationStatus)
    },
    async confirmOrder(){
      this.orderParam.memberReceiveAddressId = this.address.id
      this.orderParam.useIntegration = this.integration == "" ? 0 : this.integration
      this.orderParam.cartIds = this.cartItemList.map(item => item.id)
      console.log("orderParam",this.orderParam)
      await confirmOrder(this.orderParam).then(res => {
        this.$message({
          type: 'success',
          message: '下单成功'
        })
        console.log("下单返回",res)
        this.$router.push({ path:'/order/obligation',query: {status: 0}})
      })
    },
    // addCar() {
    //   console.log("addCar",this.product)
    //   console.log("用户id",this.$store.getters.id)
    //   this.cartItem.productId = this.product.id
    //   addCart(this.cartItem).then(() => {
    //     this.$message({
    //       type: 'success',
    //       message: '加入购物车成功'
    //     })
    //   })
    //   // TODO 加购
    // },
    toInfo(id) {
      console.log("id",id)
      this.$router.push({path: '/product', query: {id: id}})
    },
    handleCurrentChange(val) {
      // this.currentRow = val;
      console.log("currentRow",val)
      // console.log("currentRow",addressList[val])
      this.address = val
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped>
  .myFont {
    color: #999;
    font-size: 12px;
    text-align: left;
  }

</style>
